<template>
  <div class="box">
    <header>
      <div :class="'top ' + active">
        <navigator url="/pages/location/location"
          ><div>北京<span class="iconfont icon-down1"></span></div
        ></navigator>

        <div>
          <!-- <input type="text" /> -->
          <span class="iconfont icon-fangdajing"></span>
          <span>试试搜：呷哺呷哺</span>
        </div>
      </div>
      <div class="swiper">
        <swiper :circular="circular" :autoplay="autoplay" :interval="interval" :duration="duration">
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <div>
              <img
                :src="item.picUrl"
                alt=""
              />
            </div>
          </swiper-item>
        </swiper>
      </div>
    </header>
    <div class="navigator">
      <div v-for="(item, index) in toplist" :key="index">
        <navigator :url="index===2?'/pages/ranking/index':'list[index]'">
          <span>
            <span>
              <img
                :src="item.img"
                alt=""
              />
            </span>
          </span>

          <span>
            {{ item.name }}
          </span>
        </navigator>
      </div>

      <!--     
      <navigator url="/pages/hot/index"><span >123</span>
      </navigator> -->
    </div>
     <!-- <div class="delicious">
      <div>
        <text class="test">&#xe61a;</text>
        <h3>{{ delicious.title }}</h3>
        <div class="imgs">
          <div v-for="item in delicious.listData[0].items64" :key="item.id">
            <img :src="item[0].image" alt="" />
            <span>{{ item[0].title }}</span>
          </div>
        </div>
      </div>
    </div> -->

    <div class="hot">
      <div class="hot-top">
        <div>
          <span class="iconfont icon-huo"></span>
          <span>热门品牌</span>
        </div>
        <div>
          <navigator>
            <span>更多</span>
            <span>></span>
          </navigator>
        </div>
      </div>
      <div class="hot-content">
        <div
          v-for="item in hotList"
          :key="item.manageShopId"
        >
          <img
            :src="item.logo"
            alt=""
          />
          <span>
            {{ item.shopName }}
          </span>
          <span>
            {{ item.styleCooking }}
          </span>
        </div>
      </div>
    </div>
    <div class="impose">
      <div class="impose-top">
        <div>
          <span class="iconfont alarm icon-shijianlishijilujishizhongbiaomianxing"></span>
          <span>限时特惠</span>
        </div>
        <div>
          <span>更多</span>
          <span>></span>
        </div>
      </div>
      <div class="impose-content">
        <div v-for="(item, index) in imposeList" :key="index">
          <div v-for="ite in item.items64" :key="ite[0].id">
            <img :src="ite[0].image" alt="" />
            <span>
              {{ ite[0].title }}
            </span>
            <span>
              {{ ite[0].desc }}
            </span>
          </div>
        </div>
      </div>
    </div>
      
       
        <ShopList/>
      
     
      
  </div>

</template>

<script>
import ShopList from '../../components/ShopList.vue'
import {
  getbanner,
  getbanner2,
  gethotList,
  // getDelicious,
  getimposeList,
} from "@/service/index";

import "../../static/font_2197595_jc1thycheq/iconfont.css";
export default {
  data () {
    return {
      active: "",
      imposeList: [],
      list: ["/pages/fire/index", "", "/pages/ranking/index", ""],
      toplist: [],
      bannerList: [],
      hotList: [],
      title: "Hello",
      autoplay: true,
      circular: true,
      interval: 2000,
      duration: 500,
     // delicious: [], //美食热点
    };
  },
   components:{
     ShopList
   },
    
   
  onLoad() {},
  onPageScroll(e) {
    if (e.scrollTop > 10) {
      this.active = "active";
    } else {
      this.active = "";
    }
  },
  async onShow() {
    let result = await getbanner();
    if (result.errNo === 0) {
      this.toplist = result.data.items;
    }
    let banner2 = await getbanner2();

    if (result.errNo === 0) {
      this.bannerList = banner2.data;
    }
    this.gethotList();
    this.getimposeList();
    // 获取delicious
    // let res = await getDelicious();
    // if (res.errNo === 0) {
    //   this.delicious = res.data[1];
    //   console.log(res.data);
    //   console.log(this.delicious.listData[0]);
    //   console.log(this.delicious.listData[0].items64[0][0].image);
    // }

  },
  methods: {
    async gethotList () {
      let result = await gethotList();
      if (result.errNo === 0) {
        this.hotList = result.data;
      }
    },
    async getimposeList() {
      let result = await getimposeList();
      if (result.errNo === 0) {
        this.imposeList = result.data[0].listData;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// @font-face {
//   font-family: "iconfont";
//   src: url("https://at.alicdn.com/t/font_2617594_eo7y91jr7x.ttf?t=1623933628045")
//     format("truetype");
// }
// .test {
//   font-family: iconfont;
//   margin-left: 30rpx;
//   color: #fd333f;
//   float: left;
// }


header {
  background: linear-gradient(180deg, #e8443d 30%, #fff);
  padding: 62rpx 30rpx;
  .icon-down1 {
    font-size: 50rpx;
  }
  .top {
    width: 100%;
    height: 70rpx;
    display: flex;
    justify-content: left;
    align-items: center;
    color: #ffffff;
    position: fixed;
    z-index: 999;
    padding: 62rpx 30rpx;
    top: 0;
    left: 0;
    div:nth-child(1) {
      margin-right: 20rpx;
      margin-top: -10rpx;
    }
    div:nth-child(2) {
      position: relative;
      background: pink;
      border-radius: 34rpx;
      height: 100%;
      width: 340rpx;

      span:nth-child(1) {
        position: absolute;
        width: 10rpx;
        top: 18rpx;
        left: 22rpx;
        font-size: 30rpx;
      }
      span:nth-child(2) {
        position: absolute;
        top: 14rpx;
        left: 74rpx;
        font-size: 30rpx;
      }
    }
  }
  .active {
    width: 100%;
    background: #e8443d;
    padding: 62rpx 30rpx 30rpx 30rpx;
  }
}
.swiper {
  height: 220rpx;
  margin-top: 30rpx;
  border-radius: 30rpx;
  overflow: hidden;
  margin-top: 122rpx;
  img {
    width: 100%;
    height: 220rpx;
  }
}
.navigator {
  padding: 0 40rpx;
  height: 160rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  > div {
    navigator {
      display: flex;
      flex-direction: column;
      align-items: center;
      span:nth-child(2) {
        font-size: 30rpx;
      }
      > span {
        text-align: center;
        img {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
}
// 美食热点
// .delicious {
//     width: 100%;
//     display: flex;
//     flex-direction: column;
//     h3 {
//       font-weight: 900;
//       margin-left: 10rpx;
//     }
//     .imgs {
//       height: 550rpx;
//       >div{
//         position: relative;
//         span{
//           // width: 100%;
//           // height: 44rpx;
//           // background: rgba(0,0,0,0.5);
//           // position: absolute;
//           // bottom: 0;
//           // left: 50rpx;
//         }
//       }
	
//       img {
//         border-radius: 20rpx;
//         width: 100%;
//         height: 100%;
//       }

//      div:nth-child(1) {
//         float: left;
//         width: 47%;
//         height: 100%;
//         margin-left: 10rpx;
//       }
//      div:nth-child(2) {
// 		 float: left;
//         width: 49%;
//         height: 49%;
//         margin-left: 10rpx;
//       }
//      div:nth-child(3) {
//         width: 49%;
//         height: 49%;
//         margin-top: 11rpx;
//         margin-left: 10rpx;
// 		float: left;
//       }
//     }
//   }

.hot {
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  .hot-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    > div:nth-child(1) {
      span:nth-child(2) {
        font-weight: 900;
        margin-left: 10rpx;
      }
    }
    > div:nth-child(2) {
      span {
        font-size: 30rpx;
        margin-left: 10rpx;
      }
    }
  }
  .hot-content {
    display: flex;
    justify-content: space-between;
    flex-shrink: 1;
    white-space: nowrap;
    overflow-x: auto;

    padding: 0 10rpx;
    &::-webkit-scrollbar {
      display: none;
    }
    > div {
      margin-right: 30rpx;
      width: 180rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      > span {
        font-size: 32rpx;
      }
      > span:nth-child(3) {
        color: #aaa;
      }
    }
    img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 14rpx;
    }
  }
  .icon-huo {
    color: red;
  }
}
.impose {
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  .impose-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    > div:nth-child(1) {
      span:nth-child(2) {
        font-weight: 900;
        margin-left: 10rpx;
      }
    }
    > div:nth-child(2) {
      span {
        font-size: 30rpx;
        margin-left: 10rpx;
      }
    }
  }
  .impose-content {
    > div {
      display: flex;
      justify-content: space-between;
      img {
        width: 340rpx;
        height: 220rpx;
        border-radius: 12rpx;
      }
      > div {
        // width: 45%;
        // overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        span {
          font-size: 30rpx;
        }
        span:nth-child(3) {
          color: #aaa;
        }
      }
    }
  }
  .alarm {
    color: red;
    font-size: 32rpx;
  }
}
</style>
